import React, { Component } from 'react';
import './style.css'
import FootAudio from '../FootAudio';
import store from '../../../store';
import api from '../../../api';

class Sheet extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
            audioStatus:false,
            id:null,
            img:null,
            name:null,
            arName:null
        }
    }
    playAudio = (v,id,img,name,arName) =>{
        return()=>{
            console.log(v);
            this.setState({
                audioStatus:true,
                id:id,
                img:img,
                name:name,
                arName:arName
            })


            api.getPublic(`/song/url?id=${id}`).then(res=>{
                console.log('点击列表获取数据',res);
                this.setState({
                    audioMsg:res.data.data
                })
                if(res.data.data){
                    const action = {
                        type: 'music',
                        value: res.data.data
                    }
                    store.dispatch(action)
                }else{
                    alert('暂无版权')
                    return
                }
            })



            const action = {
                type: 'songName',
                value: v
            }
            store.dispatch(action)

        }
    }
    // componentWillReceiveProps(nextProps){
    //     console.log('nextProps',nextProps);
        
    // }
    // componentDidMount(){
    //     if(this.props.id!==null){
    //         api.getPublic(`/song/url?id=${this.props.id}`).then(res=>{
    //             console.log('点击列表获取数据',res);
    //             this.setState({
    //                 audioMsg:res.data.data
    //             })
    //             if(res.data.data){
    //                 const action = {
    //                     type: 'music',
    //                     value: res.data.data
    //                 }
    //                 store.dispatch(action)
    //             }else{
    //                 alert('暂无版权')
    //                 return
    //             }
    //         })



    //         const action = {
    //             type: 'songName',
    //             value: v
    //         }
    //         store.dispatch(action)
    //     }
    // }
    
    render() {
        
        // console.log('redux数据',store.getState());
        // console.log('歌单页面接收的数据',this.props.msg);
        return (
            <div className="sheet-container">
                {/* 单子页面 */}
                {
                    this.props.msg?<div className="sheet">
                    <div className="sheet-nav">
                        <div className="sheet-nav-left">
                            <span className="iconfont icon-bofang"></span>
                            <span className="play-all">播放全部</span>
                            {this.props.msg.hotSongs?<span>（共
                                {this.props.msg.hotSongs.length}
                                首）</span>:<span>（共
                                {this.props.msg.tracks.length}
                                首）</span>}
                        </div>
                        {
                            this.props.msg.subscribedCount?<div className="sheet-nav-right">
                            <span>+</span>
                            <span>收藏（{((this.props.msg.subscribedCount) / 10000).toFixed(1)}万）</span>
                        </div>:null
                        }
                    </div>
                    <div className="sheet-list">
                        {
                            this.props.msg.hotSongs?this.props.msg.hotSongs.map((v, i) => {
                                return <div className="list" key={i} onClick={this.playAudio(v.id,v.al.picUrl,v.name,v.ar)}>
                                    <div className="list-number">
                                        {i + 1}
                                    </div>
                                    <div className="list-music">
                                        <p>{v.name}</p>
                                        <p className="list-music-container">{v.al.name} - {v.ar[0].name}</p>
                                    </div>
                                </div>
                            }):this.props.msg.tracks.map((v, i) => {
                                return <div className="list" key={i} onClick={this.playAudio( v,v.id,v.al.picUrl,v.name,v.ar)}>
                                    <div className="list-number">
                                        {i + 1}
                                    </div>
                                    <div className="list-music">
                                        <p>{v.name}</p>
                                        <p className="list-music-container">{v.ar[0].name}<span>/{v.ar[1]?v.ar[1].name:''}</span> - {v.al.name} </p>
                                    </div>
                                </div>
                            })
                        }

                    </div>
                </div>:null
                }
                <div style={{height:this.state.audioStatus ?'40px':'0px' }}></div>
                {
                    Object.keys(store.getState().music).length!==0 ? <FootAudio footMsg={store.getState().inputValue.id}/>:null
                }

            </div>
        );
    }
}

export default Sheet;